import { Breadcrumb } from 'antd';
import { useEffect, useState } from 'react';
import { IRouteComponentProps } from 'umi';
import React from 'react';
export default function useBreadcrumb({ route, location }) {
  const [breadcrumb, setBreadcrumb] = useState([]);
  const pathMapToMenu: any = (routes: any[], pathname: string) => {
    const breadcrumb = [];
    for (let i = 0; i < routes.length; i++) {
      const route = routes[i];
      if (route.path) {
        if (route.path === pathname) {
          breadcrumb.push(
            <Breadcrumb.Item key={route.path}>{route.title}</Breadcrumb.Item>,
          );
        } else {
          // console.log(route);
        }
      }
      if (route.routes) {
        const subBreadcrumb = pathMapToMenu(route.routes, pathname);
        if (subBreadcrumb.length > 0) {
          breadcrumb.push(subBreadcrumb);
          break;
        }
      }
    }
    return breadcrumb;
  };
  // const pathMap = (routes: any[], pathname: string) => {
  //   const breadcrumb: { title: any; }[] = []
  //   routes.map(item => {
  //     // 一级菜单
  //     if (!item.routes) {
  //       if (item.path === pathname) {
  //         breadcrumb.push({ title: item.title })
  //       }
  //     } else {
  //       pathMap(item.routes, pathname)
  //     }
  //   })
  //   // console.log(breadcrumb);
  //   return breadcrumb;
  // }
  useEffect(() => {
    // console.log(pathMapToMenu(route?.routes, location.pathname));
    setBreadcrumb(pathMapToMenu(route?.routes, location?.pathname));
    // (pathMap(route?.routes, location?.pathname));
  }, [location.pathname]);

  return breadcrumb;
}
